<template>
  <div @touchmove.prevent>
    <el-dialog
      class="fireDialog"
      append-to-body
      :fullscreen="fullscreen"
      :visible.sync="centerDialogVisible"
      center
    >
      <div class="fireGif">
        <!-- <el-progress type="circle" :percentage="percentage"></el-progress> -->
        <div style="margin-top: -90px;">
          <div class="fireImg" style="display: flex;justify-content: center;">
            <div
              style="max-width:80px;max-height:80px;background-color:#000000;border-radius:60px;overflow: hidden;margin-bottom: 20px"
            >
              <img :src="fatherImgSrc" width="80" height="80" style="border-radius:60px;" />
            </div>
          </div>
          <div class="fireRicket" style="display: flex;justify-content: center;">
            <img :src="imgSrc" width="80" height="100px" />
          </div>
          <div class="firefire" style="display: flex;justify-content: center;">
            <img ref="isSmall" :src="imgFireSmall" v-show="isSmall" width="15" height="15" />
            <img ref="isMedium" :src="imgFireMedium" v-show="isMedium" width="25" height="25" />
            <img ref="isBig" :src="imgFireBig" v-show="isBig" width="35" height="35" />
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import img1 from '../../assets/images/upload/1.png'
import img2 from '../../assets/images/upload/小.png'
import img3 from '../../assets/images/upload/中.png'
import img4 from '../../assets/images/upload/大.png'
// import img5 from '../../assets/images/upload/0.jpg'
export default {
  name: 'fireComponents',
  props: {
    fatherImgSrc: ''
  },
  data () {
    return {
      imgSrc: img1,
      // fatherImgSrc: img5,
      imgFireSmall: img2,
      imgFireMedium: img3,
      imgFireBig: img4,
      percentage: 0,
      isSmall: true,
      isMedium: false,
      isBig: false,
      centerDialogVisible: false,
      fullscreen: true,
      bodyHeight: 0
    }
  },
  created () {
    // this.init()
    window.ontouchmove = function (e) {
      e.preventDefault && e.preventDefault()
      e.returnValue = false
      e.stopPropagation && e.stopPropagation(); return false
    }
  },
  methods: {
    init () {
      this.centerDialogVisible = true
      this.loading()
      this.firePic = setInterval(() => {
        this.init2()
      }, 150)
    },
    init2 () {
      if (this.isSmall === true) {
        this.isSmall = false
        this.isMedium = true
        this.isBig = false
        return false
      }
      if (this.isMedium === true) {
        this.isSmall = false
        this.isMedium = false
        this.isBig = true
        return false
      }
      if (this.isBig === true) {
        this.isSmall = true
        this.isMedium = false
        this.isBig = false
        return false
      }
    },
    loading () {
      this.timerName = setInterval(() => {
        this.percentage = this.percentage + 4
        if (this.percentage === 100) {
          window.clearInterval(this.timerName)
          this.timerName = null
          window.clearInterval(this.firePic)
          this.firePic = null
          alert('上传成功')
          this.uploadOK()
          return false
        }
      }, 80)
    },
    uploadOK () {
      // this.centerDialogVisible = false
      // this.percentage = 0
      this.alertMessage = setInterval(() => {
        window.clearInterval(this.alertMessage)
        this.alertMessage = null
        if (this.percentage > 90) {
          // alert('上传成功')
          this.centerDialogVisible = false
          this.percentage = 0
        }
        return false
      }, 0)
    }
  }
}
</script>

<style>
.fireDialog {
  overflow-x: hidden;
  overflow-y: auto;
}
.fireGif .el-progress--circle .el-progress__text,
.el-progress--dashboard .el-progress__text {
  top: 115%;
  font-size: 50px !important;
  color: #177bfd;
}
.el-dialog--center {
  background-color: #ffffff00;
}
.fireGif .el-dialog__body {
  display: flex;
  justify-content: center;
}
.fireGif {
  margin-top: -350px;
  /* 定义3D空间 */
  -webkit-transform-style: preserve-3d;
  animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;
  /* 沿X轴旋转 20秒线性过过渡动画 无限次播放 */
  /* 定义动画名称为x-spin*/
  -webkit-animation-name: y-spin;
  /*定义动画时间为20s*/
  -webkit-animation-duration: 3.7s;
  /* -webkit-animation-iteration-count: infinite; 定义动画过渡为线性转换 无限次数 */
  /*定义动画过渡为线性转换*/
  -webkit-animation-timing-function: linear;
}
@-webkit-keyframes y-spin {
  /* 引用u-spin动画 */
  0% {
    transform: translate(0, 100vh);
    /* 设置第一个关键帧为开始位置 */
    /* -webkit-transform: rotateZ(0deg); */
  }
  100% {
    transform: translate(0, -150vh);
    /* -webkit-transform: rotateZ(360deg); */
  }
}
.fireGif .el-progress--circle .el-progress__text,
.fireGif .el-progress--dashboard .el-progress__text {
  color: #ffffff;
}
.fireGif .el-progress--circle,
.fireGif .el-progress--dashboard {
  display: flex;
  justify-content: center;
}
</style>
